<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="utf-8">
    <title>部门管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css"/>
</head>
<body>
<div style="padding: 20px 10px 10px">
    <fieldset class="layui-elem-field" shiro:hasPermission="notice:view" >
        <legend>查询条件</legend>
        <div class="layui-field-box">
            <form class="layui-form" action="" id="searchFrm">
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="begintime" id="begintime" placeholder="请输入开始时间" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endtime" id="endtime" placeholder="请输入结束时间" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                        <button type="reset"  class="layui-btn layui-btn-primary" id="doReset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
</div>
<table id="deptTable" lay-filter="deptTable"></table>

<!--toolbar开始-->
<div id="tableToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="notice:create"  class="layui-btn" lay-event="add">添加</button>
    <button type="button" shiro:hasPermission="notice:batchdelete"  class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>
</div>
<div id="cellToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="notice:update"  class="layui-btn layui-btn-sm layui-btn-xs" lay-event="update">编辑</button>
    <button type="button" shiro:hasPermission="notice:delete"  class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除</button>
    <button type="button" shiro:hasPermission="notice:viewnotice"  class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="look">查看</button>
</div>
<!--toolbar结束-->

<!--添加修改弹出层开始-->
<form class="layui-form" id="addForm" action="" style="display: none;padding: 20px">

    <div class="layui-form-item">
        <label class="layui-form-label">公告标题</label>
        <div class="layui-input-block">
            <input type="text" id="title" name="title" lay-verify="title|required" autocomplete="off"
                   placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">

            <input type="hidden" id="id" name="id">
            <input type="hidden" id="content" name="content">
            <input type="hidden" id="createtime" name="createtime">
            <input type="hidden" id="opername" name="opername">
            <textarea class="layui-textarea" id="editcontent" style="display: none">
</textarea>
        </div>
    </div>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="release">发布</button>
        <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>
    </div>
</form>
<!--添加修改弹出层结束-->

<!--查看弹出层开始-->
<div style="padding: 20px 10px 10px;display: none" id="finddiv">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <div><span id="findtitle"></span></div>
        </legend>
        <div class="layui-field-box">
            <span id="findcontent"></span>
        </div>
    </fieldset>
</div>
<!--查看弹出层结束-->

<script src="/resources/layui/layui.js"></script>
<script>
    var tableIns;
    layui.use(['table', 'form', 'jquery', 'laydate', 'layer', 'layedit'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        var layer = layui.layer;

        var layedit = layui.layedit;

        var indexedit;// = layedit.build('editcontent'); //建立编辑器

        var addFormUrl;

        //加载日期
        laydate.render({
            elem: '#begintime'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#endtime'
            , type: 'datetime'
        });
        //第一个实例
        tableIns = table.render({
            elem: '#deptTable'
            , height: 312
            , url: '/notice/loadAllNotice' //数据接口
            , page: true //开启分页
            , toolbar: "#tableToolbar"
            , cols: [
                [ //表头
                    {width: 80, type: 'checkbox'}
                    , {field: 'id', title: 'ID', width: 80}
                    , {field: 'title', title: '标题', width: 200}
                    , {field: 'content', title: '内容', width: 100}
                    , {field: 'createtime', title: '创建时间', width: 200}
                    , {field: 'opername', title: '作者', width: 100}
                    , {title: '操作', width: 200, fixed: 'right', align: 'center', toolbar: '#cellToolbar'}
                ]
            ]
        });
        var layerindex;
        //监听事件
        table.on('toolbar(deptTable)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    layer.open({
                        title: '发布公告',
                        type: 1,
                        area: ['500px', '400px'],
                        content: $('#addForm'),
                        success: function (layero, index) {
                            layerindex = index;
                            addFormUrl = "/notice/addNotice";
                            indexedit = layedit.build('editcontent'); //建立编辑器
                        }
                    })
                    break;
                case 'batchDelete':
                    layer.msg('批量删除');
                    var checkStatus = table.checkStatus('deptTable')
                        , data = checkStatus.data;
                    // var data1 = JSON.stringify(data);


                    var noticelists=[];
                    for (var i = 0; i < data.length; i++) {
                        noticelists[i] = data[i].id;
                    }
                    $.post("/notice/deleteListNotice", {id: noticelists}, function (data) {
                        layer.msg(data.msg);
                        // //重新加载表格
                        $("#doReset").click();
                    });
                    break;

            }
            ;
        });
        table.on('tool(deptTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.data.id);
            switch (obj.event) {
                case 'update':
                    layer.msg('编辑');
                    $("#editcontent").val(obj.data.content)
                    $("#content").val(obj.data.content)
                    $("#createtime").val(obj.data.createtime)
                    $("#opername").val(obj.data.opername)
                    $("#id").val(obj.data.id)
                    $("#title").val(obj.data.title)
                    layer.open({
                        title: '修改并保存公告',
                        type: 1,
                        area: ['500px', '400px'],
                        content: $('#addForm'),
                        success: function (layero, index) {
                            layerindex = index;
                            addFormUrl = "/notice/updateNotice";
                            indexedit = layedit.build('editcontent'); //建立编辑器
                        }
                    })

                    break;
                case 'delete':
                    $.post("/notice/deleteNotice", {id: obj.data.id}, function (data) {
                        layer.msg(data.msg);
                        //重新加载表格
                        $("#doReset").click();
                    });
                    break;
                case 'look':
                    $("#findtitle").html(obj.data.title)
                    $("#findcontent").html(obj.data.content)
                    layer.open({
                        title: '查看公告',
                        type: 1,
                        area: ['500px', '300px'],
                        content: $('#finddiv')
                    })
                    break;
            }
            ;
        });
        $("#release").click(function () {
            var content = layedit.getContent(indexedit);
            //获得富文本编辑器中的内容并赋给 input
            $("#content").val(content);
            var params = $("#addForm").serialize();
            $.post(addFormUrl, params, function (data) {
                layer.msg(data.msg);
            });
            $("#addForm")[0].reset();
            $("#doReset").click();
            layer.close(layerindex)
        });
        $("#cancel").click(function () {
            $("#addForm")[0].reset();
            layer.close(layerindex)
        })
        //监控查询事件
        form.on("submit(doSearch)", function (data) {
            var params = $("#searchFrm").serialize();
            console.log(params)
            tableIns.reload({
                url: '/notice/loadAllNotice?' + params
            })
            //刷新表格
            return false;
        });
        //监控重置事件
        $("#doReset").click(function () {
            tableIns.reload({
                url: '/notice/loadAllNotice'
            })
            //刷新表格
            return false;
        });

    });
</script>
</body>

</html>